// 1- 将面向过程中定义的变量或常量作为对象的实例属性
// 2- 将面向过程中定义的函数作为对象的原型方法
function Tag({index=0,el,colorArr=["red","yellow","green"]}) {
	this.btns = document.querySelectorAll(el+" button");
	this.divs = document.querySelectorAll(el+" div");
	this.colorArr = colorArr;
	this.index = index;// 选中下标
	this.init();
}

Object.assign(Tag.prototype, {
	init() {
		for (let i = 0; i < this.btns.length; i++) {
			this.hide(i);
			this.btns[i].onclick = ()=> {
				if (i === this.index) return;
				this.hide();
				this.index = i;
				this.show();
			}
		}
		this.show();
	},
	// npm express
	hide(i = this.index) {
		this.btns[i].style.background = null;
		this.divs[i].style.display = "none";
	},
	show() {
		this.btns[this.index].style.background =this.divs[this.index].style.background = this.colorArr[this.index];
		this.divs[this.index].style.display = "block";
	}
});